<style>
	.amap-wrapper {
		width: 900px;
		height: 600px;
	}
	
	.amap-demo {
		height: 100px;
	}
</style>
<template>
	<div>
		<Modal v-model="modalShow" :closable='false' :mask-closable=false fullscreen>
			<p slot="header">违章录入</p>
			<div style="margin-bottom: 20px;">
				<Steps :current="stepNum">
	        	<Step title="订单筛选"></Step>
	        	<Step title="违章录入"></Step>
            	</Steps>	
            </div>
            <!--步骤一-->
			<Row v-if="stepNum == 0">
				<Col span="16">
				<Form label-position="left" :label-width="100">
					<FormItem label="车牌" prop="dot_id">
						<Select v-model="searchData.car_id" filterable>
							<Option v-for="(item,key) in getSearchData.cars" :value="key" :key="key">{{ item }}</Option>
						</Select>
					</FormItem>
					
					<FormItem label="时间" prop="price">
						 <DatePicker :value="searchData.break_time" @on-change="timeChange" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="违章时间" style="width: 200px"></DatePicker>
					</FormItem>
				</Form>
				</Col>
			</Row>
			
			<Row v-if="stepNum == 1">
				<Col span="16">
				<Form ref="formData" :model="formData" label-position="left" :label-width="100">
					<FormItem label="用车人" prop="realname">
						<Input v-model="formData.realname" disabled/>
					</FormItem>
					
					<FormItem label="订单号" prop="order_sn">
						<Input v-model="formData.order_sn" disabled/>
					</FormItem>
					
					<FormItem label="车牌号" prop="break_car_sn">
						<Input v-model="formData.break_car_sn" disabled/>
					</FormItem>
					
					<FormItem label="违章时间" prop="break_time">
						 <Input v-model="formData.break_time" disabled/>
					</FormItem>
					
					<FormItem label="违章行为" prop="break_action">
						 <Input v-model="formData.break_action"/>
					</FormItem>
					
					<FormItem label="地点" prop="break_address">
						 <Input v-model="formData.break_address"/>
					</FormItem>
					
					<FormItem label="罚款" prop="break_price">
						 <Input v-model="formData.break_price"/>
					</FormItem>
					
					<FormItem label="扣分" prop="break_score">
						<Select v-model="formData.break_score" filterable>
							<Option value="1" key="1">1</Option>
							<Option value="3" key="3">3</Option>
							<Option value="6" key="6">6</Option>
							<Option value="12" key="12">12</Option>
						</Select>
					</FormItem>
					
					<FormItem label="违章内容(选填)" prop="break_score">
						<Input v-model="formData.break_intro" type="textarea" :rows="4" placeholder="输入和粘贴交管局违章信息" />
					</FormItem>
					
					<FormItem label="是否提供协助处理服务">
						<i-switch v-model="formData.is_agent" :true-value="1" :false-value="-1" />
					</FormItem>
					
					  
    				<FormItem label="自行处理">
						<Input v-model="formData.handle_day">
					        <span slot="prepend">会员自行处理：</span>
					        <span slot="append">天内处理</span>
    					</Input>
					</FormItem>
					
				</Form>
				</Col>
			</Row>

			<div slot="footer">
				<Button type="text" @click="cancel">取消</Button>
				<Button type="primary" v-if="stepNum == 1" @click="beforebreakSearchExcute" >上一步</Button>
				<Button type="primary" v-if="stepNum == 0" @click="breakSearchExcute">下一步</Button>
				<Button type="primary" v-if="stepNum == 1" @click="add" :loading='saveLoading'>确认录入</Button>
			</div>
		</Modal>

	</div>
</template>
<script>
	import {
		addBreak,
		getCar,
		breakSearch
	} from '@/api/break'

	//import Editor from '_c/editor'
	//import Upload from '_c/common/upload'
	export default {
		components: {
			//  Editor,
			//  Upload
		},
		created() {
			let t = this;
			t.getCarExcute();
		},
		data() {
			let t = this;
			return {
				modalShow: true,
				saveLoading: false,
				mapModal: false,
				mapModal1: false,
				stepNum:0,
				getSearchData: {
					cars: [],
				},
				searchData:{
					car_id:'',
					break_time:''
				},
				formData: {
					user_id: '',
					order_id: '',
					order_sn: '',
					order_type: '',
					break_car_sn: '',
					break_price: '',
					break_action:'',
					break_score:'',
					break_address:'',
					break_time:'',
					break_intro:'',
					is_agent:-1,
					handle_day:''
				}
			}
		},
		methods: {
			getCarExcute() {
				let t = this;
				getCar().then(res => {
					t.getSearchData.cars = res.data.data;
				}, function(error) {})
			},
			timeChange(dateTime){
				let t = this;
				t.searchData.break_time = dateTime
			},
			breakSearchExcute(){
				 let t = this; 
				 //console.log(t.searchData.car_id);
				 //console.log(t.searchData.break_time);
				
				 breakSearch(t.searchData.car_id,t.searchData.break_time).then(res=>{
				 	 
				 	 if(res.data.code == 1){
				 	 	 t.stepNum += 1;//步数加一
				 	    let res_data = res.data.data;
				 	    t.formData.user_id = res_data.user_id;
				 	    t.formData.order_id = res_data.order_id;
				 	    t.formData.order_sn = res_data.order_sn;
				 	    t.formData.order_type = res_data.order_type;
				 	    t.formData.break_car_sn = res_data.break_car_sn;
				 	    t.formData.realname = res_data.realname;
				 	    t.formData.break_time = t.searchData.break_time
				 	 }else{
				 	 	t.$Notice.error({
									title: res.data.msg
						})
				 	 }
				 })
			},
			beforebreakSearchExcute(){
				let t = this;
				 t.stepNum -= 1;//步数加一
			},
			add() {
				let t = this
				t.$refs.formData.validate((valid) => {
					if(valid) {
						t.saveLoading = true
						//console.log(JSON.stringify(t.formData));
//						return;
						addBreak(t.formData).then(res => {
							if(res.data.code == 1) {
								t.saveLoading = false
								t.modalShow = false
								t.$emit('on-add-modal-success')
								t.$emit('on-add-modal-hide')
								t.$Notice.success({
									title: res.data.msg
								})
							} else {
								t.saveLoading = false
								t.$Notice.error({
									title: res.data.msg
								})
							}

						}, function(error) {
							t.saveLoading = false
						})
					}
				})
			},
			cancel() {
				this.$emit('on-add-modal-hide')
				this.modalShow = false
			}
		},

	}
</script>